<template>
    <div>
        <!-- 提示栏 -->
        <el-card class="!border-none" shadow="never">
            <el-alert class="text-xxl" type="warning" :closable="false" show-icon>
                <template v-slot:title>
                    <div class="py-[3px]">温馨提示：</div>
                    <div class="py-[3px]">
                        1.版本更新需要逐个版本更新，
                        <span class="text-[#f56c6c]">
                            更新前请备份好系统和数据库，更新成功后需要重启Python服务；
                        </span>
                    </div>
                    <div class="py-[3px]">2.系统没有做二次开发，可以直接选择在线更新功能，但一定要先做好代码和数据的备份；</div>
                    <div class="py-[3px]">
                        3.系统已做二次开发，进行了功能修改，请谨慎选择在线更新功能，推荐以更新包的形式手动更新；
                    </div>
                </template>
            </el-alert>
        </el-card>

        <!-- 表格栏 -->
        <el-card v-loading="pager.loading" class="!border-none mt-4" shadow="never">
            <el-table :data="pager.lists" size="large" border>
                <el-table-column label="发布日期" prop="publish_time" min-width="180" />
                <el-table-column label="版本号" min-width="150">
                    <template #default="{ row, $index }">
                        <div class="flex items-center">

                            <div class="mr-2">{{ row?.version_no }}</div>
                            <el-tag
                                v-if="$index == 0 && pager.page == 1"
                                size="small"
                                type="primary"
                            >
                                最新
                            </el-tag>
                        </div>
                        <div v-if="row.curr_version">
                            <el-badge is-dot />
                            <span class="ml-1">您的系统当前处于此版本</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="版本内容" min-width="220px">
                    <template #default="{ row }">
                        <div class="" v-for="(item, index) in row.improve" :key="index">
                            新增：{{ item }}
                        </div>
                        <div class="" v-for="(item, index) in row.optimize" :key="index">
                            优化：{{ item }}
                        </div>
                        <div class="" v-for="(item, index) in row.repair" :key="index">
                            修复：{{ item }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="remarks" label="注意事项" min-width="220px">
                    <template #default="{ row }">
                        <div>{{ row?.remarks || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160px" fixed="right">
                    <template #default="{ row }">
                        <div class="operation flex flex-wrap">
                            <div v-perms="['system:upgrade:upgrade']">
                                <el-button
                                    v-if="row.able_update"
                                    type="primary"
                                    link
                                    @click="onOuterVisible(row.id)"
                                >
                                    一键更新
                                </el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paging v-model="pager" @change="queryLists" />
            </div>
        </el-card>

        <!-- 弹窗1 -->
        <el-dialog v-model="state.outerVisible" width="400px" title="系统是否进行二次开发" center>
            <div class="flex flex-col justify-between items-center">
                <div class="flex flex-col pb-8">
                    <div>
                        <el-button class="w-full" type="primary" @click="notSecondaryDev">
                            未做二次开发，直接更新
                        </el-button>
                    </div>
                    <div class="mt-2.5">
                        <el-button class="w-full" @click="secondaryDev">已做二次开发</el-button>
                    </div>
                    <div class="mt-2.5">
                        <el-button class="w-full" @click="state.outerVisible = false">
                            取消更新
                        </el-button>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 弹窗2 -->
        <el-dialog width="400px" v-model="state.innerVisible" append-to-body center>
            <div>
                <div v-if="state.isSecondaryDev == false" style="text-align: center">
                    <div>一键更新导致的系统问题，可前往社区反馈问题。</div>
                    <div class="text-error">请务必做好系统备份 (很重要)！</div>
                </div>
                <div v-else style="text-align: center">
                    <div class="font-bold">二次开发后请<span class="text-error">谨慎</span>使用一键更新功能！</div>
                    <div class="mt-2">二次开发一键更新导致的系统问题，官方无法处理！</div>
                    <div class="mt-2 text-warning font-bold">请务必做好系统备份 (避免出现问题后无法恢复)！</div>
                </div>
            </div>
            <template v-slot:footer>
                <div>
                    <el-button type="primary" @click="confirmUpdate"> 确定更新 </el-button>
                    <el-button @click="state.innerVisible = false"> 取消更新 </el-button>
                </div>
                <div class="mt-3" v-if="state.isSecondaryDev">
                    <el-button @click="state.innerVisible = false">
                        下载更新包，手动更新
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 弹窗3 -->
        <el-dialog
            width="300px"
            v-model="state.threeVisible"
            append-to-body
            title="更新中"
            center
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div class="pt-10" style="height: 200px; text-align: center">
                <div
                    v-loading="state.loading"
                    element-loading-text="系统更新中，更新完毕后会自行刷新页面 切勿关闭窗口或刷新页面"
                ></div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import upgradeApi from '@/api/system/upgrade'
import { useLockFn } from '@/hooks/useLockFn.ts'

const state = reactive({
    id: '',
    loading: false,
    threeVisible: false,
    outerVisible: false,
    innerVisible: false,
    isSecondaryDev: false
})

// 分页查询
const { pager, queryLists } = usePaging({
    fetchFun: upgradeApi.lists,
    params: {}
})

// 一建更新弹窗
const onOuterVisible = (id: any) => {
    state.outerVisible = true
    state.id = id
}

// 未做二次开发
const notSecondaryDev = () => {
    state.outerVisible = false
    state.innerVisible = true
    state.isSecondaryDev = false
}

// 已做二次开发
const secondaryDev = () => {
    state.outerVisible = false
    state.innerVisible = true
    state.isSecondaryDev = true
}

// 确认进行更新
const confirmUpdate = () => {
    state.innerVisible = false
    state.threeVisible = true
    systemUpgrade()
}

const { lockFn: systemUpgrade } = useLockFn(async () => {
    try {
        state.loading = true
        // await upgrade({
        //     id: state.id,
        //     update_type: 1 // 1:一键更新
        // })
        await queryLists()
    } catch {}

    state.threeVisible = false
    state.innerVisible = false
    state.outerVisible = false
})

onMounted(async () => {
    await queryLists()
})
</script>
